// import styles from './index.less';
import UserApi from '../api/user.api';
import HTTP from '../services/api';
import { Form, Input, Button } from 'antd';
import './register.less';
import React from 'react';

const Register = (props) => {
  const onFinish = async (values) => {
    console.log('Success:', values);

    let { nickname, password, phone, code } = values;
    let result = await HTTP({ method: 'post' }, UserApi.userRegister, {
      ...values,
    });
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  return (
    <div className="login_background">
      <Form
        name="basic"
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        initialValues={{ remember: true }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
      >
        <Form.Item
          label="昵称"
          name="nickname"
          rules={[{ required: false, message: 'Please input your username!' }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="密码"
          name="password"
          rules={[{ required: false, message: 'Please input your password!' }]}
        >
          <Input.Password />
        </Form.Item>

        <Form.Item name="phone" label="手机号码">
          <Input />
        </Form.Item>

        <Form.Item name="code" label="验证码">
          <Input />
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
          <Button type="primary" htmlType="submit">
            注册
          </Button>
          <Button
            onClick={() => {
              props.change();
            }}
          >
            我要去登陆
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
};

export default Register;
